<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>训练记录</title>
        <link rel="stylesheet" type="text/css" href="../css/aui.css" />
        <script src="../script/jquery.js"></script>
        <script src="../CommonTool/commonNetWork.js"></script>
    </head>
    <style>
        progress {
            margin-left: 5%;
            position: relative;
            height: 24px;
            width: 85%;
            border: 1px solid #fff;
        }
        /* progress::before {
    content: "Loading: " attr(value) "%";
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: blue;
 } */
        progress::-webkit-progress-bar {
            background-color: orange;
        }
        progress::-webkit-progress-value {
            background-color: green;
        }
        .progress-textOne {
            position: absolute;
            left: 15%;
            top: 75%;
            transform: translate(-0%, -50%);
            color: #000;
            font-size: 14px;
        }
        .progress-textTwo {
            position: absolute;
            left: 50%;
            top: 75%;
            transform: translate(-0%, -50%);
            color: rgb(161, 159, 159);
            font-size: 14px;
        }
        .ThreeColumnsOne {
            width: 29%;
            float: left;
            text-align: left;
            font-size: 0.75rem;
        }
        .ThreeColumnsTwo {
            width: 23%;
            float: left;
            font-size: 0.75rem;
        }
        .ThreeColumnsThree {
            width: 20%;
            float: left;
            text-align: center;
            font-size: 0.75rem;
        }
        .ThreeColumnsFour {
            width: 28%;
            float: right;
            text-align: center;
            font-size: 0.75rem;
        }
        .RowColumns {
            height: 60px;
            line-height: 60px;
            padding-left: 3%;
            border-bottom: solid 1px rgb(212, 211, 211);
        }
        .RowColumnsIng {
            height: 60px;
            line-height: 60px;
            padding-left: 3%;
            background-color: rgb(220, 238, 215);
            border-bottom: solid 1px rgb(212, 211, 211);
        }
    </style>

    <body>
        <header class="aui-bar aui-bar-nav" id="aui-header">
            <div class="aui-pull-left aui-btn" onclick="close_win();">
                <span class="aui-iconfont aui-icon-left"></span>返回
            </div>
            <div class="aui-title" style="left: 2rem; right: 2rem">
                <span id="MenuName"></span>
                训练记录
            </div>
            <div class="aui-pull-right">
                <i class="aui-iconfont aui-icon-my" onclick="UserCenter()"></i>
            </div>
        </header>
        <div class="aui-grid" style="background: none">
            <div class="aui-row">
                <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem;">
                    <h2 style="margin: 0;">泛化</h2>
                    <a 
                        class="aui-btn aui-btn-info aui-btn-sm" 
                        style="padding: 0.3rem 0.8rem;" 
                        href="studytrain.html">
                        学习
                    </a>
                </div>

                <div class="aui-col-xs-4">
                    <h2>初级训练</h2>

                    <div><span id="BasicProgressOne">0</span>/<span id="BasicProgressTwo">0</span></div>
                    <progress id="BasicProgress" value="30" max="100"></progress>
                    <span class="progress-textOne">正确题数</span>
                    <span class="progress-textTwo">总题数</span>
                </div>
                <div class="aui-col-xs-4">
                    <h2>中级训练</h2>
                    <div><span id="MiddleProgressOne">0</span>/<span id="MiddleProgressTwo">0</span></div>
                    <progress id="MiddleProgress" value="30" max="100"></progress>
                    <span class="progress-textOne">正确题数</span>
                    <span class="progress-textTwo">总题数</span>
                </div>
                <div class="aui-col-xs-4">
                    <h2>高级训练</h2>
                    <div><span id="AdvancedProgressOne">0</span>/<span id="AdvancedProgressTwo">0</span></div>
                    <progress id="AdvancedProgress" value="30" max="100"></progress>
                    <span class="progress-textOne">正确题数</span>
                    <span class="progress-textTwo">总题数</span>
                </div>
            </div>
            <div class="aui-row">
                <ul id="RecordHtml">
                    <!-- <li class="RowColumns">
                        <div class="ThreeColumnsOne">1.基础初级-身份认知</div>
                        <div class="ThreeColumnsTwo">全部完成：10/10关</div>
                        <div class="ThreeColumnsThree">通过率：30%</div>
                        <div class="ThreeColumnsFour">2024-7-15 12:56:30</div>
                    </li>
                    <li class="RowColumnsIng" onclick="JumpProgress()">
                        <div class="ThreeColumnsOne">2.基础初级-表情识别</div>
                        <div class="ThreeColumnsTwo">进行中</div>
                        <div class="ThreeColumnsThree">通过率：20%</div>
                        <div class="ThreeColumnsFour">2024-7-15 12:56:30</div>
                    </li> -->
                </ul>
            </div>
        </div>
    </body>
</html>
<script>
    var token = "";
    var userid = "";
    var groupId = "";
    var classType = "泛化";
    var moodType = "";
    apiready = function () {
        token = api.pageParam.token;
        userid = api.pageParam.uid;
        var currentTimestamp = Date.now();
        recordCount();
        recordList();
    };
    //训练记录的总数
    function recordCount() {
        $.ajax({
            url: CommonUrl + "/PregressRecord/queryUserClassCountDetail", // 新接口
            method: "get",
            dataType: "json",
            contentType: "application/json",
            headers: {
                Authorization: `Bearer ${token}`,
            },
            data: {
                uid: userid,
                classType: classType,
            },
            success: function (data) {
                let response = JSON.parse(JSON.stringify(data));
                console.log(JSON.stringify(data));
                console.log(data);
                // document.getElementById("BasicProgress").max = response.allElementaryCount;
                // document.getElementById("BasicProgress").value = response.userElementaryClassCount;
                // document.getElementById("MiddleProgress").max = data.allIntermediateCount;
                // document.getElementById("MiddleProgress").value = data.userIntermediateClassCount;
                // document.getElementById("AdvancedProgress").max = data.allAdvancedCount;
                // document.getElementById("AdvancedProgress").value = data.userAdvancedClassCount;

                // document.getElementById("BasicProgressOne").textContent = data.userElementaryClassCount;
                // document.getElementById("BasicProgressTwo").textContent = data.allElementaryCount;
                // document.getElementById("MiddleProgressOne").textContent = data.userIntermediateClassCount;
                // document.getElementById("MiddleProgressTwo").textContent = data.allIntermediateCount;
                // document.getElementById("AdvancedProgressOne").textContent = data.userAdvancedClassCount;
                // document.getElementById("AdvancedProgressTwo").textContent = data.allAdvancedCount;

                // basic
                let totalNums_basic = 0;
                let totalAllClass_basic = 0;
                data.forEach((item) => {
                    if (item.sceneLevel === "初级") {
                        totalNums_basic += item.nums;
                        totalAllClass_basic += item.allClass;
                    }
                });

                // intermediate
                let totalNums_intermediate = 0;
                let totalAllClass_intermediate = 0;
                data.forEach((item) => {
                    if (item.sceneLevel === "中级") {
                        totalNums_intermediate += item.nums;
                        totalAllClass_intermediate += item.allClass;
                    }
                });

                // advanced
                let totalNums_advanced = 0;
                let totalAllClass_advanced = 0;
                data.forEach((item) => {
                    if (item.sceneLevel === "高级") {
                        totalNums_advanced += item.nums;
                        totalAllClass_advanced += item.allClass;
                    }
                });

                document.getElementById("BasicProgress").value = totalNums_basic;
                document.getElementById("BasicProgress").max = totalAllClass_basic;
                document.getElementById("MiddleProgress").value = totalNums_intermediate;
                document.getElementById("MiddleProgress").max = totalAllClass_intermediate;
                document.getElementById("AdvancedProgress").value = totalNums_advanced;
                document.getElementById("AdvancedProgress").max = totalAllClass_advanced;

                document.getElementById("BasicProgressOne").textContent = totalNums_basic;
                document.getElementById("BasicProgressTwo").textContent = totalAllClass_basic;
                document.getElementById("MiddleProgressOne").textContent = totalNums_intermediate;
                document.getElementById("MiddleProgressTwo").textContent = totalAllClass_intermediate;
                document.getElementById("AdvancedProgressOne").textContent = totalNums_advanced;
                document.getElementById("AdvancedProgressTwo").textContent = totalAllClass_advanced;

                var ul = document.getElementById("RecordHtml");

                // 清空原有内容（如果需要）
                ul.innerHTML = "";

                response.forEach(function (item) {
                    var li = document.createElement("li");
                    li.innerHTML = `场景: ${item.scene} | 难度: ${item.sceneLevel} | 课程类型: ${item.courseType} | 正确率: ${item.percent} | 时间: ${item.timestamp}`;
                    ul.appendChild(li);
                });
            },
            error: function (error) {
                alert(JSON.stringify(error));
            },
        });
    }
    // function recordList() {
    //     $.ajax({
    //         url: CommonUrl + "/PregressRecord/queryUserClassCountDetail?uid=" + userid,
    //         method: "get",
    //         dataType: "json",
    //         contentType: "application/json",
    //         headers: {
    //             Authorization: `Bearer ${token}`,
    //         },
    //         success: function (data) {
    //             var res = JSON.parse(JSON.stringify(data));
    //             // let stringifiedData = JSON.stringify(data);
    //             // alert(stringifiedData)
    //             // let parsedData = JSON.parse(stringifiedData);
    //             // alert(parsedData);
    //             var str = "";
    //             res.forEach(function (context, index) {
    //                 if (context.status === "end") {
    //                     str +=
    //                         "<li class='RowColumns'>" +
    //                         '<div class="ThreeColumnsOne">' +
    //                         Number(index + 1) +
    //                         "." +
    //                         context.scene +
    //                         context.sceneLevel +
    //                         "-" +
    //                         context.courseType +
    //                         "</div>" +
    //                         '<div class="ThreeColumnsTwo">' +
    //                         "已完成" +
    //                         ":" +
    //                         context.nums +
    //                         "/" +
    //                         context.allClass +
    //                         "</div>" +
    //                         '<div class="ThreeColumnsThree">' +
    //                         "通过率" +
    //                         ":" +
    //                         context.percent +
    //                         "</div>" +
    //                         '<div class="ThreeColumnsFour">' +
    //                         context.timestamp +
    //                         "</div>" +
    //                         "</li>";
    //                 } else if (context.status === "ing") {
    //                     if (context.courseType == "视线训练") {
    //                         str +=
    //                             "<li class='RowColumnsIng'  onclick=\"JumpProgress('" +
    //                             context.sceneLevel +
    //                             "', '" +
    //                             context.courseType +
    //                             "', '" +
    //                             context.nums +
    //                             "', '" +
    //                             context.groupId +
    //                             "')\">" +
    //                             '<div class="ThreeColumnsOne">' +
    //                             Number(index + 1) +
    //                             "." +
    //                             context.scene +
    //                             context.sceneLevel +
    //                             "-" +
    //                             context.courseType +
    //                             "</div>" +
    //                             '<div class="ThreeColumnsTwo">' +
    //                             "进行中" +
    //                             ":" +
    //                             context.nums +
    //                             "/" +
    //                             context.allClass +
    //                             "</div>" +
    //                             '<div class="ThreeColumnsFour">' +
    //                             context.timestamp +
    //                             "</div>" +
    //                             "</li>";
    //                     } else {
    //                         str +=
    //                             "<li class='RowColumnsIng'  onclick=\"JumpProgress('" +
    //                             context.sceneLevel +
    //                             "', '" +
    //                             context.courseType +
    //                             "', '" +
    //                             context.nums +
    //                             "', '" +
    //                             context.groupId +
    //                             "')\">" +
    //                             '<div class="ThreeColumnsOne">' +
    //                             Number(index + 1) +
    //                             "." +
    //                             context.scene +
    //                             context.sceneLevel +
    //                             "-" +
    //                             context.courseType +
    //                             "</div>" +
    //                             '<div class="ThreeColumnsTwo">' +
    //                             "进行中" +
    //                             ":" +
    //                             context.nums +
    //                             "/" +
    //                             context.allClass +
    //                             "</div>" +
    //                             '<div class="ThreeColumnsThree">' +
    //                             "通过率" +
    //                             ":" +
    //                             context.percent +
    //                             "</div>" +
    //                             '<div class="ThreeColumnsFour">' +
    //                             context.timestamp +
    //                             "</div>" +
    //                             "</li>";
    //                     }
    //                 }
    //             });
    //             $("#RecordHtml").html(str);
    //         },
    //         error: function (error) {
    //             alert(JSON.stringify(error));
    //         },
    //     });
    // }
    function close_win() {
        api.openWin({
            name: "MainMenu",
            url: "./MainMenu.html",
            pageParam: {
                uid: userid,
                token: token,
            },
        });
    }
    function JumpProgress(sceneLevel, courseType, nums, groupId) {
        $.ajax({
            url: CommonUrl + "/PregressRecord/queryHtmlType",
            method: "post",
            dataType: "json",
            data: JSON.stringify({
                sceneLevel: sceneLevel,
                courseType: courseType,
                sort: 1,
                groupId: "",
            }),
            contentType: "application/json",
            headers: {
                Authorization: `Bearer ${token}`,
            },
            success: function (data) {
                api.openWin({
                    name: "ing",
                    url:
                        "./" +
                        JSON.parse(JSON.stringify(data.data.sceneHtml)) +
                        "/" +
                        JSON.parse(JSON.stringify(data.data.courseHtml)) +
                        "/" +
                        JSON.parse(JSON.stringify(data.data.sortHtml)) +
                        ".html",
                    pageParam: {
                        uid: userid,
                        token: token,
                        groupId: groupId,
                    },
                });
            },
            error: function (error) {
                alert(JSON.parse(JSON.stringify(error.data)));
            },
        });
    }
</script>
<!-- 得分逻辑： 当进来时为ing   当做题为ing   当点击通过为ing  right   当离开时用end -->
